<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>download文件</title>
</head>
<body>
    <a href="https://www.baidu.com" target="_blank">打开百度首页1</a>
    <hr/>
    <a onclick="handlePageOpen('https://www.baidu.com/', 'baidu')">打开百度网站2</a>
    <hr/>

    <script>
        function handlePageOpen(url, name) {
            window.open(url, name,'_blank');
        }

        // form表单的形式
        /**
         * 下载文件
         * @param {String} path - 请求的地址
         * @param {String} fileName - 文件名
        */
        function downloadFile (downloadUrl, fileName) {
            // 创建表单
            const formObj = document.createElement('form');
            formObj.action = downloadUrl;
            formObj.method = 'get';
            formObj.style.display = 'none';
            // 创建input，主要是起传参作用
            const formItem = document.createElement('input');
            formItem.value = fileName; // 传参的值
            formItem.name = 'fileName'; // 传参的字段名
            // 插入到网页中
            formObj.appendChild(formItem);
            document.body.appendChild(formObj);
            formObj.submit(); // 发送请求
            document.body.removeChild(formObj); // 发送完remove
        }

    </script>
    <script>
        // open或location.href

        // window.open('downloadFile.zip');
        // location.href = 'downloadFile.zip';

        // a标签的download

    </script>
    <a href="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"  download="test">点击下载</a>

    <script>
        // 利用blob去解决下载文件的问题
        /**
         * 下载文件
         * @param {String} path - 下载地址/下载请求地址。
         * @param {String} name - 下载文件的名字/重命名（考虑到兼容性问题，最好加上后缀名）
         */
        downloadFile1 (path, name) {
            const xhr = new XMLHttpRequest();
            xhr.open('get', path);
            // xhr.responseType = 'blob';
            xhr.send();
            xhr.onload = function () {
                if (this.status === 200 || this.status === 304) {
                    // const blob = new Blob([this.response], { type: xhr.getResponseHeader('Content-Type') });
                    // const url = URL.createObjectURL(blob);
                    const url = URL.createObjectURL(this.response);
                    const a = document.createElement('a');
                    a.style.display = 'none';
                    a.href = url;
                    a.download = name;
                    document.body.appendChild(a);
                    a.click();
                    document.body.removeChild(a);
                    URL.revokeObjectURL(url);
                }
            };
        }
    </script>
    <script>
        // 利用base64 去解决下载文件的问题
        /**
         * 下载文件
         * @param {String} path - 下载地址/下载请求地址。
         * @param {String} name - 下载文件的名字（考虑到兼容性问题，最好加上后缀名）
         */
        downloadFile (path, name) {
            const xhr = new XMLHttpRequest();
            xhr.open('get', path);
            xhr.responseType = 'blob';
            xhr.send();
            xhr.onload = function () {
                if (this.status === 200 || this.status === 304) {
                    const fileReader = new FileReader();
                    fileReader.readAsDataURL(this.response);
                    fileReader.onload = function () {
                        const a = document.createElement('a');
                        a.style.display = 'none';
                        a.href = this.result;
                        a.download = name;
                        document.body.appendChild(a);
                        a.click();
                        document.body.removeChild(a);
                    };
                }
            };
        }
    </script>
</body>
</html>


 